<template>
  <div class="frank_scene">
    <div class="scene_left">
      <div class="box1">
        <div class="my-tables">
          <el-tabs type="card" v-model="activeName1" class="demo-tabs">
            <div class="input_search" style="padding: 5px">
              <el-input v-model="medicalInputFilter" placeholder="输入医疗点关键字筛选" clearable @input="HSearchMedical">
              </el-input>
            </div>
            <el-tab-pane name="first">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon>
                    <Grid />
                  </el-icon>&nbsp;
                  <span>现场实况</span>
                </span>
              </template>
              <div class="frank_input"></div>
              <div class="medical_group_list">
                <el-table :data="medicalPointUserArrCopy" style="width: 100%" max-height="780" height="780" :tree-props="{
                  children: 'userList',
                  hasChildren: 'hasChildren',
                }" row-key="Code" highlight-current-row :default-expand-all="isTableExpand">
                  <el-table-column label="现场医疗点" prop="Name" show-overflow-tooltip />
                  <!-- <el-table-column label="" prop="Telephone" show-overflow-tooltip /> -->
                  <!-- <el-table-column label="所属场馆" prop="VenueName" /> -->
                  <el-table-column align="right" width="400px">
                    <template #default="scope">
                      <el-button size="small" @click="handleMedical(scope.$index, scope.row)" :icon="
                        scope.row.userList ? 'View' : 'VideoCameraFilled'
                      ">
                        <!-- <a
                          href="http://10.71.120.238/iSecureCenter/index.html?playCameras=93e16a34d1de49c490abde7802921cca"
                          target="_blank"
                          >{{ scope.row.userList ? "现场监控" : "单兵设备" }}</a
                        > -->
                        {{ scope.row.userList ? '现场监控' : '单兵设备' }}
                      </el-button>

                      <el-button v-if="scope.row.userList" size="small" @click="linkHeartStatic(scope.row)" icon="Cpu">
                        {{ scope.row.userList ? '心电' : '' }}
                      </el-button>
                      <el-button v-if="scope.row.userList" size="small" @click="linkHeartStatic(scope.row)" icon="Cpu">
                        {{ scope.row.userList ? '12导联' : '' }}
                      </el-button>
                      <el-button v-if="scope.row.userList" size="small" @click="linkAirPlane(scope.row)" icon="View">
                        {{ scope.row.userList ? '无人机' : '' }}
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="scene_center">
      <div class="box1">
        <div class="my-tables">
          <el-tabs type="card" v-model="activeName2" class="demo-tabs">
            <el-tab-pane name="second">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon>
                    <Grid />
                  </el-icon>&nbsp;
                  <span>车辆实况</span>
                </span>
              </template>
              <div class="input_search" style="padding: 5px">
                <el-input v-model="ambulanceInputFilter" placeholder="输入车辆关键字筛选" clearable @input="HSearchAmbulance">
                </el-input>
              </div>
              <el-table :data="ambUserArrCopy" style="width: 100%; margin-bottom: 20px" max-height="780" height="780"
                :tree-props="{
                  children: 'userList',
                  hasChildren: 'hasChildren',
                }" row-key="Code" highlight-current-row>
                <el-table-column prop="Name" label="车辆" show-overflow-tooltip />
                <el-table-column align="right" width="350">
                  <template #default="scope">
                    <el-button size="small" @click="handleAmbu(scope.$index, scope.row)"
                      :icon="scope.row.userList ? 'View' : 'VideoCameraFilled'">
                      <!-- <a
                        href="http://10.71.120.238/iSecureCenter/index.html?playCameras=93e16a34d1de49c490abde7802921cca"
                        target="_blank"
                        >{{ scope.row.userList ? "车载监控" : "单兵设备" }}</a
                      > -->
                      {{ scope.row.userList ? '车载监控' : '单兵设备' }}
                    </el-button>
                    <el-button v-if="scope.row.userList" size="small" @click="linkHeart(scope.$index, scope.row)"
                      icon="Cpu">
                      {{ '心电' }}
                    </el-button>
                    <el-button v-if="scope.row.userList" size="small" @click="link12(scope.$index, scope.row)" icon="Cpu">
                      {{ '12导联' }}
                    </el-button>
                    <el-button v-if="scope.row.userList" size="small" @click="linkBChao(scope.$index, scope.row)"
                      icon="Cpu">
                      {{ 'B超' }}
                    </el-button>

                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="scene_right">
      <div class="box1">
        <div class="my-tables">
          <el-tabs type="card" v-model="activeName3" class="demo-tabs">
            <el-tab-pane name="third">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon>
                    <Grid />
                  </el-icon>&nbsp;
                  <span>医院实况</span>
                </span>
              </template>
              <div class="input_search" style="padding: 5px">
                <el-input v-model="hopitalInputFilter" placeholder="输入医院关键字筛选" clearable @input="HSearchHospital">
                </el-input>
              </div>
              <el-table :data="hospitalDataCopy" style="width: 100%" max-height="780" height="780" highlight-current-row
                row-key="id">
                <el-table-column prop="name" label="医院" width="300" show-overflow-tooltip />
                <el-table-column align="right">
                  <template #default="scope">
                    <el-button size="small" @click="handleHospi(scope.$index, scope.row)" icon="View">
                      <!-- <a
                        href="http://10.71.120.238/iSecureCenter/index.html?playCameras=93e16a34d1de49c490abde7802921cca"
                        target="_blank"
                        >{{ '医院监控' }}</a
                      > -->
                      {{ "医院监控" }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
  computed,
} from 'vue';
import EMRecord from 'views/dialog/EMRecord';
import { useStore } from 'vuex';
import { GetHospitalInfo } from 'network/hospital';
import {
  GetAmbUserList,
  GetMedicalPointUserList,
} from 'network/hosVenAmbuListData';
import { GetDanBingPreVedio } from 'network/danbingVideo';
import { GetMaiRui } from 'network/mairui';
import { ElMessage } from 'element-plus';
import {setupMapState} from "../../store/utils/hook"
export default {
  name: 'Scene',
  components: { EMRecord },
  props: [],
  setup() {
    const store = useStore();
    // console.log(store)
    const state = reactive({
      isTableExpand: false,
      medicalInputFilter: ref(''),
      ambulanceInputFilter: ref(''),
      hopitalInputFilter: ref(''),
      activeName1: ref('first'),
      activeName2: ref('second'),
      activeName3: ref('third'),
      hospitalData: ref([]),
      hospitalDataCopy: ref([]),
      ambUserArr: ref([]),
      ambUserArrCopy: ref([]),
      medicalPointUserArr: ref([]),
      medicalPointUserArrCopy: ref([]),
      testhospital: ref([]),
      singleId: ref(),
      jkId: ref(),
      linkhearturl: ref(''),
      link12url: ref(''),
    });
    const { ACVCodesVx } = setupMapState("app", ["ACVCodesVx"])
    // 筛选医疗点
    const HSearchMedical = () => {
      // console.log(state.medicalPointUserArr)
      // console.log(state.medicalPointUserArrCopy)
      // 遍历数据筛选赋值
      state.medicalPointUserArrCopy = state.medicalPointUserArr.filter(
        (item) => {
          return item.Name.search(state.medicalInputFilter) != -1;
        },
      );
    };
    // 筛选医院
    const HSearchHospital = () => {
      // console.log(state.hospitalData)
      // 遍历数据筛选赋值
      state.hospitalDataCopy = state.hospitalData.filter((item) => {
        console.log(item);
        return item.name.search(state.hopitalInputFilter) != -1;
      });
    };
    //筛选车辆
    const HSearchAmbulance = () => {
      // console.log(state.ambUserArr)
      // 遍历数据筛选赋值
      state.ambUserArrCopy = state.ambUserArr.filter((item) => {
        console.log(item);
        return item.Name.search(state.ambulanceInputFilter) != -1;
      });
    };
    // 现场医疗点
    const handleMedical = async (index, row) => {
      console.log(index, row);
      console.log('医疗点', row);
      console.log(row.EquipmentId);
      if (!row.userList) {
        console.log('医疗点人员单兵', row);
        console.log(row.EquipmentId);
        GetDanBingPreVedio({ code: row.EquipmentId })
          .then((res) => {
            console.log(res);
            window.open(res);
          })
          .catch((err) => {
            ElMessage({ message: '暂无人员单兵！' + err, type: 'warning' });
          });
        // console.log(test);
      } else {
        window.open("http://10.71.120.204/iSecureCenter/?playCameras=4ce1b712ddb6483f9ad62a912d5b7481-7c5df27d1c674fe4810af9f20faae7cd");
      }
    };
    // 车辆
    const handleAmbu = (index, row) => {
      console.log(index, row);
      if (!row.userList) {
        GetDanBingPreVedio({ code: row.EquipmentId })
          .then((res) => {
            console.log('单兵', res);
            window.open(res);
          })
          .catch((err) => {
            ElMessage({ message: '暂无人员单兵！' + err, type: 'warning' });
          });
      } else {
        GetDanBingPreVedio({ code: row.Code })
          .then((res) => {
            console.log('车载', res);
            window.open(res);
          })
          .catch((err) => {
            ElMessage({ message: '暂无车载监控！' + err, type: 'warning' });
          });
      }
    };
    // 医院
    const handleHospi = (index, row) => {
      console.log(index, row);
      window.open("http://10.71.120.204/iSecureCenter/?playCameras=abc919a023cb45e088b4c943a77b5de1");
      // ElMessage({ message: '暂无医院监控！', type: 'warning' });
      return;
      GetDanBingPreVedio({ code: row.Code })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          ElMessage({ message: '暂无医院监控！' + err, type: 'warning' });
        });
    };
    const linkHeart = (index, row) => {
      console.log(index, row.Name);
      if (row.Name != '') {
        GetMaiRui({ code: row.Name.substr(0, row.Name.indexOf('  【')) })
          .then((res) => {
            console.log(res);
            window.open(res);
          })
          .catch((err) => {
            ElMessage({
              showClose: true,
              message: '暂无心电！' + err,
              type: 'warning',
            });
          });
      } else {
        ElMessage({ showClose: true, message: '请选择！', type: 'warning' });
      }
    };
    const link12 = (index, row) => {
      console.log(index, row.Name);
      if (row.Name != '') {
        GetMaiRui({ code: row.Name.substr(0, row.Name.indexOf('  【')) })
          .then((res) => {
            console.log(res);
            window.open(res);
          })
          .catch((err) => {
            ElMessage({ message: '暂无12导联！' + err, type: 'warning' });
          });
        // GetMaiRui({code:row.Code}).then((res) => {
        //   console.log(res);
        // });
      } else {
        ElMessage({ message: '请选择车辆！', type: 'warning' });
      }
    };
    const linkBChao = () => {
      // window.open("https://meeting.yijulink.com:8889/?token1=Iv3tHnRRRfIs6KpKnERJEv7NMvH70jtQ4+tMvTBaVHCb2qllgzivBgBy19wuENZAh8Vr8r4pQgcl1imHRSD5Rg==&token2=ALIhQ420SO0CHlECyHa8hICXfWW/4WzRxo3HExYxfARWLobB8Gg4iBKQGH4x8oWweaDT8Z+TGmSS9b/A9PPx/cAmHgC7uY7Yo+KUOK5KbUdnRU0nxe1bHxN7Vz1p93oV");
      window.open("https://meeting.yijulink.com:8889/?token1=GxNvBvMYLEPeAZ9MPGqzxmlRBGL0YqGnXv1Dcao0rOpASVbVHClKicDsXdmXFh3zBGuaXyrgZJunRtNRHWTsTA==&token2=ALIhQ420SO0CHlECyHa8hICXfWW/4WzRxo3HExYxfAQCeGx5seVqA6h1ETzTWwfAb/mdXEBrp4kO5cTJGsRoFLzVXH3uBlCmQO5SvQetLp0v25v27PsZJEEeerlpFXUiQKS52HbRiy8O0GyDOBaFuGI6tvLYWkdpSpwSQREwmR8=");
    }
    const linkHeartStatic = (index, row) => {
      GetMaiRui({ code: 'A 392WA' })
        .then((res) => {
          console.log(res);
          window.open(res);
        })
        .catch((err) => {
          ElMessage({ message: '暂无心电/12导联！' + err, type: 'warning' });
        });
    }

    const linkAirPlane = (row) => {
      console.log(row.Code)
      if (row.Code == 60001) {
        window.open("http://www.antworkcloud.com/#/OperationMonitor/MonitorDrone")
      } else {
        window.open("http://www.antworkcloud.com/#/OperationMonitor/MonitorDrone")
      }
    }
    onBeforeMount(async () => {
      let hospitalList = store.state.HospVenuAmbuModule.hospitalTreeRemoteVx;
      // console.log(hospitalList)
      if (hospitalList[0] == undefined) {
        //请求医院数据
        let hospitalRequestRes = await GetHospitalInfo(
          ACVCodesVx.value,
        );
        if (hospitalRequestRes != null) {
          await store.dispatch(
            'HospVenuAmbuModule/saveHospitalAct',
            hospitalRequestRes,
          );
        }
      }
      // 1请求车辆人员数据
      let ambUserRequestRes = await GetAmbUserList(ACVCodesVx.value);
      // console.log(ambUserRequestRes);

      ambUserRequestRes.forEach((element) => {
        element.Name = element.Name + '  【' + element.VenueName + '】';
        element.userList.forEach((child) => {
          child.Name = child.Name + "-" + child.Telephone
        });
      });
      state.ambUserArr = ambUserRequestRes;
      state.ambUserArrCopy = [...state.ambUserArr];
      // console.log(state.ambUserArr);

      // 2请求现场医疗点人员数据
      let medicalPointUserRequestRes = await GetMedicalPointUserList(
        ACVCodesVx.value
      );
      medicalPointUserRequestRes.forEach((element) => {
        element.Name = element.Name + '  【' + element.VenueName + '】';
        element.userList.forEach((child) => {
          if (element.Code == child.Code) {
            // child.Code = String(child.Code) + child.Code;
          }
          child.Name = child.Name + "-" + child.Telephone
        });
      });
      state.medicalPointUserArr = medicalPointUserRequestRes;
      //复制一份
      state.medicalPointUserArrCopy = [...state.medicalPointUserArr];
      // console.log(state.medicalPointUserArrCopy);

      // 3vuex中的医院列表
      // console.log(store.state.HospVenuAmbuModule.hospitalTreeRemoteVx);
      state.hospitalData = store.state.HospVenuAmbuModule.hospitalTreeRemoteVx;
      state.hospitalDataCopy = [...state.hospitalData];
      // console.log(state.hospitalData);
    });
    onMounted(() => {
    });

    const refState = toRefs(state);
    // 方法和变量必须return出去*******************
    return {
      // 状态
      ...refState,
      // 事件处理
      HSearchMedical,
      HSearchHospital,
      HSearchAmbulance,
      handleMedical,
      handleAmbu,
      handleHospi,
      linkHeart,
      link12,
      linkBChao,
      linkHeartStatic,
      linkAirPlane
    };
  },
};
</script>
<style scoped>
.frank_scene {
  display: flex;
}

.scene_left,
.scene_center,
.scene_right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.scene_left,
.scene_center {
  flex: 1.2;
  height: calc(100vh - 65px);
}

.scene_right {
  flex: 1;
  height: calc(100vh - 65px);
}

.frank_scene .scene_left .box1,
.frank_scene .scene_center .box1,
.frank_scene .scene_right .box1 {
  height: 98%;
  width: 98%;
  background: #fff;
}

.frank_scene .box2 {
  height: 18%;
  width: 98%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
</style>